<template>
  <view class="container">
		<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px', backgroundColor: '#50b164' }">
			<view class="nav-content" :style="{ height: navBarHeight + 'px' }">
				<text class="nav-title">推广</text>
			</view>
		</view>
		<view class="h-5"></view>
		<mescroll-body style="position: relative;" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="{ use: false }" :top="navHeight">
			<image src="/static/images/weitu2.webp" class="background-image" mode="scaleToFill" />
			<!-- 推广数据卡片 -->
			<view class="data-card">
				<view class="card-header">
					<view class="card-title">
						<view class="title-bar"></view>
						<text>推广数据</text>
					</view>
				</view>
				<view class="card-content">
					<view class="left-content">
						<view class="label">我的团队人数（人）</view>
						<view class="value">{{promotionData.team_count}}</view>
					</view>
					<view class="right-content">
						<view class="data-item">
							<text class="label">直推人数：</text>
							<text class="value">{{promotionData.direct_count}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 会员数据卡片 -->
			<view class="data-card">
				<view class="card-header">
					<view class="card-title">
						<view class="title-bar"></view>
						<text>会员数据</text>
					</view>
				</view>
				<view class="card-content">
					<view class="left-content">
						<view class="label">团队会员人数（人）</view>
						<view class="value">{{promotionData.indirect_count}}</view>
					</view>
					<view class="right-content">
						<view class="data-item">
							<text class="label">已激活人数：</text>
							<text class="value">{{promotionData.activated_count}}</text>
						</view>
						<view class="data-item">
							<text class="label">未激活人数：</text>
							<text class="value">{{promotionData.not_activated_count}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 功能按钮区域 -->
			<view class="function-grid">
				<view class="function-item" v-for="(item, index) in functionList" :key="index" @click="handleFunction(item.page)">
					<view class="icon">
						<image :src="item.icon" class="icon-image" :class="item.iconClass" mode="scaleToFill" />
					</view>
					<text class="function-name">{{ item.name }}</text>
				</view>
			</view>

			<!-- 团队业绩卡片 -->
			<view class="data-card">
				<view class="card-header">
					<view class="card-title">
						<view class="title-bar"></view>
						<text>团队业绩</text>
					</view>
				</view>
				<view class="performance-content">
					<view class="performance-item">
						<view class="label">本月业绩</view>
						<view class="amount">¥ {{performanceData.monthly_performance}}</view>
					</view>
					<view class="performance-item">
						<view class="label">累计业绩</view>
						<view class="amount">¥ {{performanceData.total_performance}}</view>
					</view>
				</view>
			</view>
		</mescroll-body>
  </view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins';
import { getTeamStatsApi, getTeamPerformanceApi } from '@/api/promotion'
export default {
	mixins: [MescrollMixin],
  data() {
    return {
			promotionData: {
				activated_count: 0,
				direct_count: 0,
				indirect_count: 0,
				not_activated_count: 0,
				team_count: 0,
			},
			performanceData: {
				monthly_performance: 0,
				total_performance: 0,
			},
			safeAreaInsets: 0,
			statusBarHeight: 0,
			navBarHeight: 44,
			navHeight: 0,
      functionList: [
        // { name: '邀请陪伴师', iconClass: 'icon-mail', icon: '/static/images/invite.png', page: '/pages/inivite_teacher/index' },
        // { name: '邀请主理人', iconClass: 'icon-user-plus', icon: '/static/images/manager.png', page: '/pages/inivite_teacher/index' },
        { name: '权益卡分享', iconClass: 'icon-card', icon: '/static/images/profit.png', page: '/pages/promotion/class_share?type=5' },
        { name: '团队总览', iconClass: 'icon-team', icon: '/static/images/team.png', page: '/pages/promotion/team' },
        { name: '直推团队', iconClass: 'icon-direct-team', icon: '/static/images/direct.png', page: '/pages/promotion/direct' },
        { name: '间推团队', iconClass: 'icon-indirect-team', icon: '/static/images/indirect.png', page: '/pages/promotion/invite' }
      ]
    }
  },
	onLoad() {
		uni.getSystemInfo({
			success: (res) => {
				this.safeAreaInsets = res.statusBarHeight || 0;
				this.statusBarHeight = res.statusBarHeight;
				this.navHeight = this.statusBarHeight + this.navBarHeight;
			}
		});
		this.getTeamStats()
		this.getTeamPerformance()
	},
  methods: {
		async getTeamStats() {
			const res = await getTeamStatsApi()
			this.promotionData = res
		},
		async getTeamPerformance() {
			const res = await getTeamPerformanceApi()
			this.performanceData = res
		},
		async downCallback() {
			this.mescroll.endSuccess();
		},
    goBack() {
      uni.navigateBack()
    },
    handleFunction(url) {
		uni.navigateTo({ url })
    },
    switchTab(tab) {
      const tabUrls = {
        home: '/pages/index/index',
        promotion: '/pages/promotion/index',
        settlement: '/pages/settlement/index',
        my: '/pages/my/index'
      }
      uni.switchTab({
        url: tabUrls[tab]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.custom-nav {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 99;

	.nav-content {
		display: flex;
		align-items: center;
		justify-content: center;

		.nav-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #fff;
		}
	}
}

/* 容器样式 */
.container {
  position: relative;
  width: 100vw;;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.title {
  color: #fff;
  font-size: 36rpx;
  font-weight: 500;
}

.background-image {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 300rpx;
	z-index: 0;
	border-bottom-left-radius: 50rpx;
	border-bottom-right-radius: 50rpx;
	z-index: 0;
}

/* 卡片通用样式 */
.data-card {
	position: relative;
  width: 710rpx;
  margin: 20rpx auto;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	z-index: 1;
}

.card-header {
  padding: 20rpx 30rpx;
}

.card-title {
  display: flex;
  align-items: center;
}

.title-bar {
  width: 6rpx;
  height: 30rpx;
  background-color: #4CAF50;
  margin-right: 15rpx;
}

/* 数据卡片内容样式 */
.card-content {
  display: flex;
  padding: 20rpx 30rpx 30rpx;
}

.left-content {
  flex: 1;
}

.right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.value {
  font-size: 60rpx;
  font-weight: bold;
  color: #333;
}

.data-item {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.data-item .label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 0;
}

.data-item .value {
  font-size: 28rpx;
  color: #333;
  font-weight: normal;
}

/* 功能按钮区域样式 */
.function-grid {
  width: 710rpx;
  margin: 20rpx auto;
  background-color: #fff;
  border-radius: 20rpx;
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 0;
}

.function-item {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 0;
}

.icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15rpx;
}

.icon-image {
	width: 50rpx;
	height: 50rpx;
}

.function-name {
  font-size: 26rpx;
  color: #333;
}

/* 团队业绩样式 */
.performance-content {
  display: flex;
  padding: 20rpx 30rpx 30rpx;
}

.performance-item {
  flex: 1;
}

.amount {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.h-5 {
	height: 40rpx;
}

</style>